<template>
  <a-modal
    width="50%"
    v-model="isModal"
    :title="title"
    :footer="null"
    :maskClosable="false"
    forceRender
    destroyOnClose
    @cancel="cancel"
  >
    <a-form-model v-if="isModal" :model="attributeValue">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否必填" required>
        <RadioYesNo
          :value="attributeObj.isRequired"
          field="isRequired"
          f_field="attributeObj"
          @f_setYesNo="s_setYesNo"
        />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否隐藏" required>
        <RadioYesNo
          :value="attributeObj.hidden"
          field="hidden"
          f_field="attributeObj"
          @f_setYesNo="s_setYesNo"
        />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否禁用" required>
        <RadioYesNo
          :value="attributeObj.disable"
          field="disable"
          f_field="attributeObj"
          @f_setYesNo="s_setYesNo"
        />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="校验规则">
        <RulesAdd ref="rulesRef" :valuelist="attributeValue.rules" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否小标题" required>
        <RadioYesNo :value="attributeObj.isLable" field="isLable" f_field="attributeObj" @f_setYesNo="s_setYesNo" />
        <!-- 如果是小标题输入小标题 -->
        <template v-if="attributeObj.isLable">
          <br />小标题：<a-input
            style="width: 350px"
            allow-clear
            v-model="attributeValue.lable"
            :maxLength="10"
            placeholder="请输入小标题"
        /></template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否响应式" required>
        <RadioYesNo
          :value="attributeObj.isExpression"
          field="isExpression"
          f_field="attributeObj"
          @f_setYesNo="s_setYesNo"
        />
        <!-- 如果是小标题输入小标题 -->
        <template v-if="attributeObj.isExpression"
          ><br />表达式：<a-input
            style="width: 350px"
            allow-clear
            v-model="attributeValue.expression"
            placeholder="请输入表达式 this.selectData.字段名==枚举值"
        /></template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="控件类型" required>
        <RadioYesNo
          :value="attributeObj.type"
          field="type"
          f_field="attributeObj"
          @f_setYesNo="s_setYesNo"
          :dataList="typeList"
        />
        <br />
        <!-- 输入框类型 -->
        <template v-if="['textarea', 'input'].includes(attributeObj.type)">
          最大长度：<a-input-number
            v-model="attributeValue.maxLength"
            style="width: 150px"
            placeholder="请输入最大长度"
          />
        </template>
        <!-- 数字输入框类 -->
        <template v-else-if="attributeObj.type == 'number'">
          最小值：<a-input-number
            style="width: 150px"
            v-model="attributeValue.minValue"
            placeholder="请输入最小值"
          /><br />
          最大值：<a-input-number
            style="width: 150px"
            v-model="attributeValue.maxValue"
            placeholder="请输入最大值"
          /><br />
          精度：<a-input-number style="width: 150px" v-model="attributeValue.precision" :placeholder="`请输入精度`" />
        </template>
        <!-- 文件类型 -->
        <template v-else-if="attributeObj.type == 'file'">
          上传数量：<a-input-number
            style="width: 150px"
            v-model="attributeValue.maxFile"
            placeholder="请输入最大上传数量"
          />
        </template>
        <!-- 枚举下拉类型 -->
        <template v-else-if="['select', 'tree'].includes(attributeObj.type)">
          <!-- 枚举下拉组件 -->
          枚举值：<SearchEnum @f_setEnum="s_setEnum" :value="attributeValue.enum" />
          <br />
          <!-- 枚举值单多选 -->
          是否多选：<RadioYesNo
            :value="attributeValue.ismultiple"
            field="ismultiple"
            f_field="attributeValue"
            @f_setYesNo="s_setYesNo"
          />
        </template>
        <!-- 级联类型 -->
        <template v-else-if="attributeObj.type == 'cascader'">
          <RadioYesNo
          :value="attributeObj.range"
          field="range"
          f_field="attributeValue"
          @f_setYesNo="s_setYesNo"
          :dataList="rangeList"
        />
        </template>
        <!-- 日期类型 -->
        <template v-else-if="attributeObj.type == 'date'">
           格式化：<a-input
            v-model="attributeValue.format"
            style="width: 250px"
            placeholder="请输入格式化 YYYY-MM-DD"
          />
        </template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="过滤条件">
        <FilterAdd
          ref="filterRef"
          v-if="f_congfigMap != null"
          :fieldList="f_congfigMap.entFieldList"
          :valuelist="attributeValue.filters"
        />
      </a-form-model-item>
    </a-form-model>

    <!-- 按钮 -->
    <div class="btnBox">
      <a-button
        @click="
          () => {
            isModal = false
          }
        "
        :style="{ marginRight: '8px' }"
        icon="rollback"
      >
        返回
      </a-button>
      <a-button @click="configSave()" type="primary" :style="{ marginRight: '8px' }" icon="save"> 保存 </a-button>
    </div>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      title: '属性配置',
      f_congfigMap: null, // 父组件配置对象
      rangeList: [
        { key: 'ad', name: '全国(不含街道)' },
        { key: 'ad4', name: '全国(含街道)' },
        { key: 'ad4jx', name: '江西' }
      ],
      typeList: [
        { key: 'input', name: '文本' },
        { key: 'number', name: '数字' },
        { key: 'select', name: '枚举' },
        { key: 'file', name: '文件' },
        { key: 'date', name: '日期' },
        { key: 'textarea', name: '文本域' },
        { key: 'cascader', name: '地址级联' },
        { key: 'tree', name: '下拉树' },
      ], // 控件类型单选配置
      f_index: null,
      index: null,
      f_config: {},
      attributeObj: {
        isLable: false, // 是否是小标题
        isRequired: true, // 是否必填
        isExpression: false, // 是否响应式
        type: 'input', // 控件类型
        hidden: false, // 是否隐藏
        disable: false, // 是否禁用
      }, // 属性配置对象
      attributeValue: {
        enum: undefined, // 枚举值: 枚举组件才有
        ismultiple: false, // 是否多选: 枚举组件才有
        lable: '', // 小标题属性
        expression: '', // 弹框响应式布局配置
        rules: [], // 校验的正则表达式
        filters: [], // 过滤条件
        maxLength: undefined, // 最大长度
        precision: undefined, // 精度
        minValue: undefined, // 最小值
        maxValue: undefined, // 最大值
        maxFile: undefined, // 最大文件上传数量
        range: undefined, // 级联的范围
        format: undefined, // 时间格式化
      }, // 属性配置对象值
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      isModal: false, // 模态框状态
      rules: {
        enum: { required: true, message: '请填写枚举值', trigger: 'change' },
        lable: { required: true, message: '请选择类型', trigger: 'change' },
      }, // 校验规则
    }
  },
  created() {},
  methods: {
    s_setEnum(value) {
      console.log('枚举值', value)
      this.attributeValue.enum = value
    },
    // 关闭重置属性
    cancel() {
      this.isModal = false
    },
    // 保存
    configSave() {
      // 1. 必要的校验
      if (this.attributeObj.isLable && !this.attributeValue.lable) {
        this.$message.warning('请输入小标题')
        return
      } else if (this.attributeObj.isExpression && !this.attributeValue.expression) {
        console.log('this.attributeObj.isExpression', this.attributeObj.isExpression)
        this.$message.warning('请输入响应式表达式')
        return
      }
      // 2. 取校验组件的值
      let r_check = this.$refs.rulesRef.f_checkRules()
      if (r_check?.status) {
        this.attributeValue.rules = r_check.value || []
      } else {
        return
      }
      // 3. 去过滤组件配置
      let f_check = this.$refs.filterRef.f_checkfilter()
      if (f_check?.status) {
        this.attributeValue.filters = f_check.value || []
      } else {
        return
      }
      // 4. 校验对应类型的属性
      if (['textarea', 'input'].includes(this.attributeObj.type)) {
        if (!this.attributeValue.maxLength) {
          this.$message.warning('请输入文本最大长度')
          return
        }
      } else if (this.attributeObj.type == 'number') {
        if (this.attributeValue.precision == undefined) {
          this.$message.warning('请输入数字精度')
          return
        }
        if (this.attributeValue.minValue == undefined) {
          this.$message.warning('请输入数字最大值')
          return
        }
        if (this.attributeValue.maxValue == undefined) {
          this.$message.warning('请输入数字最小值')
          return
        }
      } else if (['select', 'tree'].includes(this.attributeObj.type)) {
        if (!this.attributeValue.enum) {
          this.$message.warning('请输入枚举值')
          return
        }
      } else if (this.attributeObj.type == 'file') {
        if (!this.attributeValue.maxFile) {
          this.$message.warning('请输入文件上传最大数量')
          return
        }
      }
      // 4. 返回给父组件保存
      this.$emit(
        'f_setAttribute',
        JSON.parse(JSON.stringify(this.attributeObj)),
        JSON.parse(JSON.stringify(this.attributeValue)),
        this.index
      )
      this.cancel()
    },
    // 单选组件值
    s_setYesNo(value, field, f_field) {
      // console.log('单选', value, field, f_field)
      this[f_field][field] = value
    },
    // 初始化方法
    f_init(index, congfigMap, title) {
      this.title = title
      this.index = index
      this.f_congfigMap = JSON.parse(JSON.stringify(congfigMap))
      this.attributeObj = congfigMap?.mapping[index]
      console.log('congfigMap?.mapping[index][key]', congfigMap?.mapping[index])
      if (congfigMap?.mapping[index]) {
        for (let key in this.attributeObj) {
          if (key in congfigMap?.mapping[index] && congfigMap?.mapping[index][key] != undefined) {
            this.attributeObj[key] = congfigMap?.mapping[index][key]
          }
        }
      }
      if (congfigMap?.mapping[index].attributeValue) {
        for (let key in this.attributeValue) {
          if (
            key in congfigMap.mapping[index].attributeValue &&
            congfigMap.mapping[index].attributeValue[key] != undefined
          ) {
            this.attributeValue[key] = congfigMap.mapping[index].attributeValue[key]
          }
        }
      }
      if (this.attributeObj.type == undefined) {
        this.$set(this.attributeObj, 'type', 'input')
        this.$set(this.attributeValue, 'maxLength', 100)
      } else {
        this.$set(this.attributeObj, 'type', this.attributeObj.type)
      }
      for (let key in this.attributeValue) {
        this.$set(this.attributeValue, key, this.attributeValue[key])
      }
      for (let key in this.attributeObj) {
        this.$set(this.attributeObj, key, this.attributeObj[key])
      }
      // console.log('attributeObj', this.attributeObj)
      // console.log('attributeValue', this.attributeValue)
      this.isModal = true
    },
  },
  components: {
    RadioYesNo: () => import('@/views/businessAssembly/public/spareparts/radioYesNo'),
    RulesAdd: () => import('@/views/businessAssembly/public/spareparts/rulesAdd.vue'),
    SearchEnum: () => import('@/views/businessAssembly/public/spareparts/searchEnum.vue'),
    FilterAdd: () => import('@/views/businessAssembly/public/spareparts/filterAdd.vue'),
  },
}
</script>

<style lang="less" scoped>
.btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 50px;
}
</style>
